<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>谁杀死了比尔？</title>
  <style>
    :root {
      --primary-color: #ff6600;
      --secondary-color: #ff8533;
      --bg-color: #2d2d2d;
      --text-color: #ffffff;
      --border-color: rgba(255, 255, 255, 0.2);
      --card-bg: rgba(45, 45, 45, 0.95);
      --hover-color: #ff9966;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      background-image: url('https://gitee.com/codechickentub/kiki/raw/master/bgp.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      background-color: #2d2d2d;
      /* 备用背景色 */
      color: var(--text-color);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      margin: 0;
      padding: 20px;
      line-height: 1.6;
    }

    #game-container {
      background-color: var(--card-bg);
      padding: 2.5rem;
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      width: 90%;
      max-width: 900px;
      backdrop-filter: blur(10px);
      border: 1px solid var(--border-color);
      transition: transform 0.3s ease;
    }

    #game-container:hover {
      transform: translateY(-5px);
    }

    .rules-section {
      background-color: rgba(0, 0, 0, 0.2);
      padding: 1.8rem;
      border-radius: 15px;
      margin-bottom: 2rem;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
    }

    .rules-section:hover {
      background-color: rgba(0, 0, 0, 0.3);
    }

    .rules-section h2 {
      color: var(--primary-color);
      margin-bottom: 1.2rem;
      font-size: 1.6rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .rules-section ul {
      color: #ddd;
      line-height: 1.8;
      padding-left: 1.8rem;
      margin: 0;
    }

    .rules-section li {
      margin-bottom: 0.8rem;
      position: relative;
    }

    .rules-section li::before {
      content: "•";
      color: var(--primary-color);
      position: absolute;
      left: -1.2rem;
    }

    h1 {
      text-align: center;
      color: var(--primary-color);
      margin-bottom: 2rem;
      font-size: 2.8rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      letter-spacing: 2px;
    }

    #chat-history {
      max-height: 400px;
      overflow-y: auto;
      padding: 1rem;
      margin-bottom: 1.5rem;
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 15px;
      border: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
    }

    .message {
      margin: 1rem 0;
      padding: 1rem;
      border-radius: 12px;
      max-width: 80%;
      word-wrap: break-word;
      animation: fadeIn 0.3s ease;
      display: inline-block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .user-message {
      background-color: var(--primary-color);
      color: var(--text-color);
      margin-left: auto;
      text-align: right;
    }

    .system-message {
      background-color: rgba(255, 255, 255, 0.1);
      color: var(--text-color);
      margin-right: auto;
      text-align: left;
    }

    #chat-history::-webkit-scrollbar {
      width: 8px;
    }

    #chat-history::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 4px;
    }

    #chat-history::-webkit-scrollbar-thumb {
      background: var(--primary-color);
      border-radius: 4px;
    }

    #chat-history::-webkit-scrollbar-thumb:hover {
      background: var(--hover-color);
    }

    #question-input {
      width: 100%;
      padding: 1.2rem;
      margin: 1.2rem 0;
      border: 2px solid var(--border-color);
      border-radius: 12px;
      color: var(--text-color);
      background-color: rgba(0, 0, 0, 0.2);
      font-size: 1.1rem;
      transition: all 0.3s ease;
    }

    #question-input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 15px rgba(255, 102, 0, 0.3);
    }

    #submit-btn {
      background-color: var(--primary-color);
      color: var(--text-color);
      border: none;
      padding: 1.2rem 2.5rem;
      border-radius: 12px;
      cursor: pointer;
      font-size: 1.2rem;
      font-weight: bold;
      transition: all 0.3s ease;
      width: 100%;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    #submit-btn:hover {
      background-color: var(--hover-color);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(255, 102, 0, 0.3);
    }

    #submit-btn:active {
      transform: translateY(0);
    }

    #timer {
      text-align: center;
      font-size: 1.4rem;
      margin: 1.2rem 0;
      color: var(--primary-color);
      font-weight: bold;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
      padding: 0.8rem;
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      border: 1px solid var(--border-color);
    }

    #clue-collection {
      margin-top: 1.8rem;
      padding: 1.5rem;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 15px;
      border: 1px solid var(--border-color);
      backdrop-filter: blur(5px);
    }

    #clue-collection h3 {
      color: var(--primary-color);
      margin-bottom: 1.2rem;
      font-size: 1.4rem;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    #clue-collection h3::before {
      content: "🔍";
      font-size: 1.2rem;
    }

    #clue-counter {
      background: var(--primary-color);
      color: white;
      padding: 0.2rem 0.6rem;
      border-radius: 12px;
      font-size: 0.9rem;
      margin-left: auto;
    }

    .clue-item {
      padding: 1rem 1.2rem;
      margin: 0.8rem 0;
      background: linear-gradient(135deg, rgba(255, 102, 0, 0.1) 0%, rgba(255, 133, 51, 0.1) 100%);
      border-radius: 12px;
      border-left: 4px solid var(--primary-color);
      transition: all 0.3s ease;
      position: relative;
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: 0.95rem;
      line-height: 1.5;
    }

    .clue-item::before {
      content: "💡";
      font-size: 1.1rem;
      flex-shrink: 0;
    }

    .clue-item:hover {
      background: linear-gradient(135deg, rgba(255, 102, 0, 0.2) 0%, rgba(255, 133, 51, 0.2) 100%);
      transform: translateX(8px);
      box-shadow: 0 4px 15px rgba(255, 102, 0, 0.2);
    }

    .clue-item.important {
      border-left: 4px solid #ff4444;
      background: linear-gradient(135deg, rgba(255, 68, 68, 0.15) 0%, rgba(255, 102, 102, 0.15) 100%);
    }

    .clue-item.important::before {
      content: "⚡";
      color: #ff4444;
    }

    .clue-item .clue-time {
      font-size: 0.8rem;
      color: #aaa;
      margin-left: auto;
      flex-shrink: 0;
    }

    .clue-category {
      display: inline-block;
      background: rgba(255, 102, 0, 0.2);
      color: var(--primary-color);
      padding: 0.2rem 0.5rem;
      border-radius: 8px;
      font-size: 0.8rem;
      margin-right: 0.5rem;
      border: 1px solid rgba(255, 102, 0, 0.3);
    }

    #clues-empty {
      text-align: center;
      color: #888;
      font-style: italic;
      padding: 2rem;
      border: 2px dashed rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      margin: 1rem 0;
    }

    #clues-empty::before {
      content: "🕵️‍♂️";
      display: block;
      font-size: 2rem;
      margin-bottom: 0.5rem;
    }

    /* 脉冲动画 */
    @keyframes pulse {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }

      100% {
        transform: scale(1);
      }
    }

    /* 线索内容样式 */
    .clue-content {
      flex: 1;
      word-wrap: break-word;
    }

    /* 信息按钮区样式 */
    .info-buttons {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 2rem;
      flex-wrap: wrap;
    }

    .info-btn {
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
      color: var(--text-color);
      border: none;
      padding: 0.8rem 1.5rem;
      border-radius: 25px;
      cursor: pointer;
      font-size: 0.95rem;
      font-weight: bold;
      transition: all 0.3s ease;
      box-shadow: 0 3px 10px rgba(255, 102, 0, 0.2);
      min-width: 120px;
    }

    .info-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4);
      background: linear-gradient(135deg, var(--hover-color) 0%, #ffaa66 100%);
    }

    .info-btn:active {
      transform: translateY(-1px);
    }

    /* 弹窗样式 */
    .modal {
      display: none;
      position: fixed;
      z-index: 2000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(5px);
    }

    .modal-content {
      background: linear-gradient(135deg, var(--card-bg) 0%, rgba(60, 60, 60, 0.95) 100%);
      margin: 5% auto;
      padding: 2rem;
      border-radius: 20px;
      width: 90%;
      max-width: 700px;
      max-height: 80%;
      overflow-y: auto;
      border: 1px solid var(--border-color);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      position: relative;
      animation: modalSlideIn 0.3s ease;
    }

    @keyframes modalSlideIn {
      from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .close {
      color: #aaa;
      float: right;
      font-size: 2rem;
      font-weight: bold;
      cursor: pointer;
      transition: color 0.3s ease;
      position: absolute;
      top: 1rem;
      right: 1.5rem;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
    }

    .close:hover,
    .close:focus {
      color: var(--primary-color);
      background: rgba(255, 102, 0, 0.2);
    }

    /* 弹窗内容样式 */
    .modal-content h2 {
      color: var(--primary-color);
      margin-bottom: 1.5rem;
      font-size: 1.8rem;
      text-align: center;
    }

    .modal-content ul {
      color: #ddd;
      line-height: 1.8;
      padding-left: 1.5rem;
    }

    .modal-content li {
      margin-bottom: 0.8rem;
    }

    .modal-content p {
      color: #ddd;
      line-height: 1.8;
      margin-bottom: 1rem;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      #game-container {
        padding: 1.5rem;
        width: 95%;
      }

      h1 {
        font-size: 2rem;
      }

      #timer {
        font-size: 1.2rem;
      }

      .message {
        max-width: 95%;
      }

      .info-buttons {
        gap: 0.5rem;
      }

      .info-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        min-width: 100px;
      }

      .modal-content {
        width: 95%;
        margin: 10% auto;
        padding: 1.5rem;
        max-height: 70%;
      }

      .modal-content h2 {
        font-size: 1.5rem;
      }

      .close {
        top: 0.5rem;
        right: 1rem;
        font-size: 1.5rem;
      }
    }

    /* 游戏结束界面样式 */
    #gameOverOverlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      z-index: 1000;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 2rem;
    }

    #gameOverTitle {
      font-size: 3rem;
      color: var(--primary-color);
      margin-bottom: 2rem;
      text-align: center;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .result-message {
      font-size: 1.8rem;
      margin-bottom: 2rem;
      text-align: center;
      padding: 1rem 2rem;
      border-radius: 15px;
      background-color: rgba(255, 255, 255, 0.1);
    }

    .result-message.victory {
      color: #4CAF50;
      border: 2px solid #4CAF50;
    }

    .result-message.defeat {
      color: #f44336;
      border: 2px solid #f44336;
    }

    #gameOverDescription {
      font-size: 1.2rem;
      color: #ddd;
      text-align: center;
      max-width: 600px;
      margin-bottom: 2rem;
      line-height: 1.6;
    }

    #restartBtn {
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 1rem 2rem;
      font-size: 1.2rem;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    #restartBtn:hover {
      background-color: var(--hover-color);
      transform: translateY(-2px);
    }

    /* 开始界面样式 */
    #startOverlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      z-index: 1000;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 2rem;
    }

    #startTitle {
      font-size: 3rem;
      color: var(--primary-color);
      margin-bottom: 2rem;
      text-align: center;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    #startBtn {
      background-color: var(--primary-color);
      color: var(--text-color);
      border: none;
      padding: 1.2rem 2.5rem;
      border-radius: 12px;
      cursor: pointer;
      font-size: 1.2rem;
      font-weight: bold;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    #startBtn:hover {
      background-color: var(--hover-color);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(255, 102, 0, 0.3);
    }

    #startBtn:active {
      transform: translateY(0);
    }

    #game-container {
      display: none;
    }

    /* 音乐控制按钮样式 */
    #music-control {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1001;
      background-color: var(--primary-color);
      border: none;
      width: auto;
      height: 40px;
      padding: 0 15px;
      border-radius: 20px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease;
      gap: 8px;
    }

    #music-control:hover {
      background-color: var(--hover-color);
      transform: scale(1.1);
    }

    #music-control img {
      width: 24px;
      height: 24px;
    }

    #music-control span {
      color: white;
      font-size: 14px;
      font-weight: bold;
    }

    /* 音量控制样式 */
    .volume-control {
      position: fixed;
      top: 70px;
      right: 20px;
      z-index: 1001;
      background-color: var(--card-bg);
      padding: 10px;
      border-radius: 10px;
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--border-color);
    }

    .volume-control.show {
      display: flex;
    }

    .volume-control label {
      color: var(--text-color);
      font-size: 14px;
    }

    #volume-slider {
      width: 100px;
      height: 4px;
      -webkit-appearance: none;
      background: var(--border-color);
      border-radius: 2px;
      outline: none;
    }

    #volume-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px;
      height: 12px;
      background: var(--primary-color);
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    #volume-slider::-webkit-slider-thumb:hover {
      background: var(--hover-color);
      transform: scale(1.2);
    }
  </style>
</head>

<body>
  <!-- 音乐控制按钮 -->
  <button id="music-control" title="播放音乐">
    <img
      src=""
      alt="音乐">
  </button>



  <!-- 音量控制 -->
  <div class="volume-control">
    <label>音量控制</label>
    <input type="range" id="volume-slider" min="0" max="100" value="50">
  </div>

  <!-- 开始界面 -->
  <div id="startOverlay">
    <h1 id="startTitle">谁杀死了比尔？</h1>
    <div style="max-width: 600px; text-align: center; margin-bottom: 2rem; color: #ddd; line-height: 1.6;">
      <p style="font-size: 1.2rem; color: #ff6600; margin-bottom: 1rem;">🤖 豆包AI助手体验</p>
      <p>集成真实豆包AI！体验智能推理对话，不再是简单的"是/否"回答！</p>
      <p style="font-size: 0.9rem; color: #aaa; margin-top: 0.5rem;">API不可用时自动使用本地逻辑</p>
    </div>
    <button id="startBtn">开始游戏</button>
  </div>

  <!-- 游戏主界面 -->
  <div id="game-container">
    <!-- 信息按钮区 -->
    <div class="info-buttons">
      <button class="info-btn" id="aiInfoBtn">🤖 AI助手</button>
      <button class="info-btn" id="caseInfoBtn">📖 案件背景</button>
      <button class="info-btn" id="rulesInfoBtn">🎯 游戏规则</button>
    </div>

    <!-- 信息弹窗 -->
    <div id="infoModal" class="modal">
      <div class="modal-content">
        <span class="close" id="closeModal">&times;</span>
        <div id="modalBody"></div>
      </div>
    </div>

    <h1>谁杀死了比尔？</h1>
    <div id="timer">剩余时间: 30:00</div>
    <div id="chat-history"></div>
    <input type="text" id="question-input" placeholder="开始你的调查吧！例如：咖啡馆里当晚都有谁？比尔的死因是什么？">
    <button id="submit-btn">提交问题</button>
    <div id="clue-collection">
      <h3>
        已收集的线索
        <span id="clue-counter">0</span>
      </h3>
      <div id="clues-list">
        <div id="clues-empty">
          开始你的调查，收集重要线索！<br>
          <small>提问相关问题时，系统会自动记录关键信息</small>
        </div>
      </div>
    </div>
  </div>

  <!-- 游戏结束界面 -->
  <div id="gameOverOverlay">
    <h2 id="gameOverTitle">游戏结束</h2>
    <div id="resultMessage" class="result-message">很遗憾，你没有找出真凶。</div>
    <p id="gameOverDescription">案件的真相比想象中更加复杂...每个人都有自己的秘密和动机。也许下次你能发现更多的线索，揭开这个错综复杂的谜团。如果你想要再次挑战，可以点击下方按钮重新开始游戏。</p>
    <button id="restartBtn">重新开始</button>
  </div>

  <audio id="bgm" src="https://gitee.com/codechickentub/kiki/raw/master/bgm.mp3" loop autoplay></audio>
  <script>
    // 检查背景图片加载状态
    const img = new Image();
    img.onload = function () {
      console.log('背景图片加载成功，强制应用背景');
      // 强制重新设置背景图片
      document.body.style.backgroundImage = 'url("https://gitee.com/codechickentub/juejin67/raw/main/bgp.png")';
      document.body.style.backgroundSize = 'cover';
      document.body.style.backgroundRepeat = 'no-repeat';
      document.body.style.backgroundPosition = 'center';
      document.body.style.backgroundAttachment = 'fixed';
    };
    img.onerror = function () {
      console.log('背景图片加载失败，请检查URL：https://gitee.com/codechickentub/kiki/raw/master/bgp.png');
      console.log('正在尝试直接访问链接进行测试...');
      // 尝试使用备用背景
      document.body.style.backgroundImage = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
      console.log('已应用备用渐变背景');
    };

    // 添加时间戳防止缓存问题
    const timestamp = new Date().getTime();
    img.src = 'https://gitee.com/codechickentub/kiki/raw/master/bgp.png?' + timestamp;

    // 额外测试：直接在控制台输出链接供用户测试
    console.log('请在新标签页测试此链接：https://gitee.com/codechickentub/kiki/raw/master/bgp.png');

    // 立即测试仓库API接口
    console.log('=== 仓库状态检查 ===');
    fetch('https://gitee.com/api/v5/repos/codechickentub/kiki')
      .then(response => response.json())
      .then(data => {
        console.log('仓库信息：', data);
        console.log('仓库是否公开：', data.public);
        console.log('默认分支：', data.default_branch);
      })
      .catch(error => console.log('API访问失败：', error));

    // 检查文件是否存在
    console.log('=== 文件存在性检查 ===');
    fetch('https://gitee.com/api/v5/repos/codechickentub/kiki/contents')
      .then(response => response.json())
      .then(files => {
        console.log('仓库文件列表：', files);
        const bgFile = files.find(f => f.name.includes('bgp') || (f.name.includes('bg') && f.name.includes('.png')));
        const musicFile = files.find(f => f.name.includes('bgm') && f.name.includes('.mp3'));
        console.log('找到的背景文件：', bgFile);
        console.log('找到的音乐文件：', musicFile);

        if (bgFile) {
          console.log('API返回的背景文件信息：', bgFile);
          console.log('download_url:', bgFile.download_url);
          console.log('html_url:', bgFile.html_url);

          // 尝试多种URL格式（包含新的kiki仓库）
          const urlVariants = [
            bgFile.download_url,
            'https://gitee.com/codechickentub/kiki/raw/master/bgp.png',
            `https://gitee.com/codechickentub/juejin67/raw/main/${bgFile.name}`,
            `https://gitee.com/codechickentub/juejin67/blob/main/${bgFile.name}?raw=true`,
            // 基于GitHub格式的Gitee链接
            `https://gitee.com/codechickentub/juejin67/raw/main/${bgFile.name}`,
          ];

          console.log('尝试的URL格式：', urlVariants);

          // 依次尝试不同的URL格式
          let urlIndex = 0;
          function tryNextUrl() {
            if (urlIndex >= urlVariants.length) {
              console.log('❌ 所有URL格式都失败，使用本地备用方案');
              // 使用内嵌的base64图片或CSS渐变
              document.body.style.backgroundImage = `
                linear-gradient(135deg, rgba(30,60,114,0.8) 0%, rgba(42,82,152,0.8) 100%),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="%23ffffff" opacity="0.05"/><circle cx="80" cy="40" r="1" fill="%23ffffff" opacity="0.05"/><circle cx="40" cy="80" r="1" fill="%23ffffff" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>')
              `;
              return;
            }

            const currentUrl = urlVariants[urlIndex];
            console.log(`尝试URL ${urlIndex + 1}:`, currentUrl);

            const testImg = new Image();
            testImg.onload = () => {
              document.body.style.backgroundImage = `url("${currentUrl}")`;
              console.log(`✅ 背景图片加载成功！使用URL: ${currentUrl}`);
            };
            testImg.onerror = () => {
              console.log(`❌ URL ${urlIndex + 1} 失败`);
              urlIndex++;
              tryNextUrl();
            };
            testImg.src = currentUrl;
          }

          tryNextUrl();
        }

        if (musicFile) {
          console.log('API返回的音乐文件信息：', musicFile);

          // 也尝试多种音频URL格式（包含新的kiki仓库）
          const musicUrls = [
            musicFile.download_url,
            `https://gitee.com/codechickentub/juejin67/raw/main/${musicFile.name}`,
            'https://gitee.com/codechickentub/kiki/raw/master/bgm.mp3',
          ];

          const audio = document.getElementById('bgm');

          // 创建多个source元素
          audio.innerHTML = '';
          musicUrls.forEach(url => {
            const source = document.createElement('source');
            source.src = url;
            source.type = 'audio/mpeg';
            audio.appendChild(source);
            console.log('添加音频源：', url);
          });

          console.log('🎵 音频源已更新，包含多个备用URL');
        }
      })
      .catch(error => console.log('文件列表获取失败：', error));



    // 如果5秒后背景还是没有加载，尝试备用方案
    setTimeout(() => {
      if (!document.body.style.backgroundImage.includes('gitee.com')) {
        console.log('5秒后仍未检测到Gitee背景，尝试备用方案...');

        // 尝试使用GitHub或其他CDN
        const backupBg = 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=1920&q=80';
        const testImg = new Image();
        testImg.onload = () => {
          document.body.style.backgroundImage = `url("${backupBg}")`;
          console.log('已应用备用网络背景');
        };
        testImg.onerror = () => {
          // 如果网络背景也失败，使用纯渐变
          document.body.style.backgroundImage = 'linear-gradient(135deg, #1e3c72 0%, #2a5298 100%)';
          console.log('已应用纯渐变背景');
        };
        testImg.src = backupBg;
      }
    }, 5000);

    // 检查音频加载状态
    const audio = document.getElementById('bgm');
    audio.addEventListener('loadstart', () => console.log('音频开始加载'));
    audio.addEventListener('canplay', () => console.log('音频可以播放'));
    audio.addEventListener('error', (e) => {
      console.log('音频加载失败：', e);
      console.log('请检查URL：https://gitee.com/codechickentub/kiki/raw/master/bgm.mp3');
    });

    // 处理用户交互后播放音频（现代浏览器需要用户交互才能播放音频）
    document.addEventListener('click', function () {
      if (audio.paused) {
        audio.play().catch(e => console.log('音频播放失败：', e));
      }
    }, { once: true });
  </script>
  <script src="script.js"></script>
</body>

</html>